import {useNavigate} from "react-router-dom";
import routeNames from "../../utils/routeNames";

const TierSystemPage = () => {
    const navigate = useNavigate()
    return (
        <>
            <div className="gamfi-breadcrumbs-section">
                <div className="container">
                    <div className="row">
                        <div className="col-lg-5">
                            <div className="breadcrumbs-area sec-heading">
                                <div className="sub-inner mb-15">
                                    <a className="breadcrumbs-link" style={{cursor : 'pointer'}} onClick={() => navigate(routeNames.HOME_PAGE)}>HOME</a>
                                    <span className="sub-title">TIERED</span>
                                    <img className="heading-left-image" src="/assets/images/icons/steps.png"
                                         alt="Steps-Image"/>
                                </div>
                                <h2 className="title mb-0">Tier System</h2>
                            </div>
                        </div>
                        <div className="col-lg-7 breadcrumbs-form breadcrumbs_progress_bar_custom md-mt-40">
                            <div className="gamfi_header_content_right gamfi_header_content_right_custom">
                                <h2>TVL $38.60 M</h2>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div className="gamfi_tier_sect">
                <div className="container">
                    <div className="row">
                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 1</h2>

                                <h3>Silver</h3>
                                <span><img src="/assets/images/icons/tier_icon1.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>Social Task</h4>

                                <p>Allocation Type</p>
                                <h4>Lottery (100 Among all)</h4>

                                <p>Minimam Staking</p>
                                <h4>0 Days</h4>

                                <p>Pool Weight</p>
                                <h4>5</h4>

                            </div>
                        </div>

                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 2</h2>

                                <h3>Bronze</h3>
                                <span><img src="/assets/images/icons/tier_icon2.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>500 BUSD</h4>

                                <p>Allocation Type</p>
                                <h4>Lottery (50% Among all)</h4>

                                <p>Minimam Staking</p>
                                <h4>7 Days</h4>

                                <p>Pool Weight</p>
                                <h4>8.5</h4>

                            </div>
                        </div>

                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 3</h2>

                                <h3>Gold</h3>
                                <span><img src="/assets/images/icons/tier_icon3.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>10,000 BUSD</h4>

                                <p>Allocation Type</p>
                                <h4>Guaranteed</h4>

                                <p>Minimam Staking</p>
                                <h4>30 Days</h4>

                                <p>Pool Weight</p>
                                <h4>12</h4>

                            </div>
                        </div>

                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 4</h2>

                                <h3>Platinum</h3>
                                <span><img src="/assets/images/icons/tier_icon4.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>25,000 BUSD</h4>

                                <p>Allocation Type</p>
                                <h4>Guaranteed</h4>

                                <p>Minimam Staking</p>
                                <h4>60 Days</h4>

                                <p>Pool Weight</p>
                                <h4>15</h4>

                            </div>
                        </div>

                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 5</h2>

                                <h3>Gold</h3>
                                <span><img src="/assets/images/icons/tier_icon5.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>50,000 BUSD</h4>

                                <p>Allocation Type</p>
                                <h4>Guaranteed</h4>

                                <p>Minimam Staking</p>
                                <h4>90 Days</h4>

                                <p>Pool Weight</p>
                                <h4>22.5</h4>

                            </div>
                        </div>

                        <div className="col-md-4">
                            <div className="gamfi_tier_card">
                                <h2>TIER 6</h2>

                                <h3>Diamond</h3>
                                <span><img src="/assets/images/icons/tier_icon6.png" alt="img"
                                           className="img-fluid"/></span>

                                <p>Staking Requirements</p>
                                <h4>10,00,000 BUSD</h4>

                                <p>Allocation Type</p>
                                <h4>Guaranteed</h4>

                                <p>Minimam Staking</p>
                                <h4>365 Days</h4>

                                <p>Pool Weight</p>
                                <h4>25</h4>

                            </div>
                        </div>
                    </div>
                </div>
                <div className="tier_galaxy_img1">
                    <img src="/assets/images/icons/galaxy_image.png" alt="" className="img-fluid"/>
                </div>
                <div className="tier_galaxy_img2">
                    <img src="/assets/images/icons/galaxyimage2.png" alt="" className="img-fluid"/>
                </div>
                <div className="tier_earth_img">
                    <img src="/assets/images/icons/earthSmall.png" alt="" className="img-fluid"/>
                </div>
            </div>
        </>
    )
}

export default TierSystemPage